/**
 *Vue组件
 * 1. 使用组件三大步骤
 *    - 定义组件
 *    - 注册组件
 *    - 使用组件
 * 2. 定义组件
 *  使用Vue.extend(options)创建,其中options和new Vue(options)时传入的那个options几乎一模一样,但也有区别:
 *  - el不要写.为啥? --最终所有的组件都要经过vm一个的管理,有VM中的el决定服务哪个容器
 *  - data必须写成函数. 避免组件被复用时,数据存在引用关系
 * 3. 注册组件
 *   - 局部注册  new Vue({components:{}})
 *   - 全局注册  Vue.component('组件名称',组件options)
 * 4. 编写组件标签
 *    <school></school>
 */


/**
 * Vue组件注意点
 * 1. 组件名称
 *  - 一个单词
 *      - 首字母小写  school
 *      - 首字母大写  School
 *  - 多个单词
 *      - kebab-case命名   my-school
 *      - CamelCase命名   MySchool  (需要在VUe脚手架支持)
 *  - 备注
 *      - 组件名尽可能回避HTML中已有的元素名称,例如 h2,H2都不可以
 *      - 可以使用name配置项指定组件在开发者工具中呈现的名字
 * 2. 关于组件标签
 *    -  <school></school>
 *    - <school/>  不使用脚手架时,这种写法会导致后续组件不能渲染
 * 3. 简写形式
 *    const school =Vue.extend(options) 可简写 const school=options
 */

// 阻止Vue在启动时生成生产提示
Vue.config.productionTip = false;

const school = Vue.extend({
	template: `<div><h2>{{schoolName}}</h2><h2>{{schoolPosition}}</h2></div>`,
	data() {
		return {
			schoolName: "北大",
			schoolPosition: "北京"
		}
	},
});
const student = Vue.extend({
	template: `<div><h2>{{studentName}}</h2><h2>{{studentAge}}</h2></div>`,
	data() {
		return {
			studentName: "玉石",
			studentAge: 20
		}
	},
});
new Vue({
	el: "#root",// 用于指定当前Vue实例在为哪个容器服务,通常为css选择器 也可以写为 document.getElementById("root")
	components: {
		school, student
	},
	data: {// data用于存储数据,数据供el指定的容器使用,
		n: 1
	},
});
